<template>
	<view>
		<view class="new_tit">
			<view class="new_l">
				<image src="/static/icon/n.png" mode=""></image>
				<view class="t1">新上线 </view>
				<view class="t2">新店上线，优惠多多，快来抢购吧~</view>
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower='onbottom' lower-threshold='100'>
			<view class="shop" v-for="(item,index) in shoplist" :key="index" @click="pageShop(item)">
				<view class="shoptit">
					<view class="">{{item.shopName}}</view>
					<view class="x"></view>
					<view class="block_flex">
						<view class="block_l">
							<span class="t1">{{item.rating}}</span>
							<image src="/static/icon/x.png" mode=""></image>
							<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
						</view>
						<view class="block_r">
							<image src="/static/icon/dw.png" mode=""></image>
							<span>{{item.distanceString}}</span>
						</view>
					</view>
				</view>
				<view class="shopflex">
					<view class="price_item" v-for="(its,i) in item.productList.slice(0,islength)" :key="i"
						@click.stop="pageDetail(item.productList[i].id,item.distanceString)">
						<view class="img">
							<image lazy-load :src="its.img.split(',')[0]" mode="aspectFill"></image>
							<view class="" v-if="its.sellStop != 1 && its.status =='UP'">
								<view class="tip" v-if="its.count <=5">仅剩{{its.count}}份</view>
								<view class="tip" v-else>剩5份+</view>
								<view class="time">
									<image src="/static/icon/z.png" mode=""></image>
									今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
								</view>
							</view>
							<view class="time1" v-if="its.sellStop == 1 || its.status !='UP'">
								<view class="tflex1" v-if="its.status !='UP'">
									<image src="/static/icon/x1.png" mode=""></image>
									<view class="">
										未上架
									</view>
								</view>
								<view class="tflex1" v-else-if="its.sellStop == 1">
									<image src="/static/icon/k.png" mode=""></image>
									<view class="">
										已售罄
									</view>
								</view>
								
								<view class="tflex">
									<image src="/static/icon/z.png" mode=""></image>
									今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
								</view>
							</view>
						</view>
						<view class="flex_r">
							<view class="text">{{its.productName}}</view>
							<view class="DINB">
								<span class="ic">￥</span>{{its.price}}
								<span class="FINE"
									style="margin-left: 10rpx;">￥{{its.priceOldBegin}}-{{its.priceOldEnd}}</span>
							</view>
							<view class="tipflex">
								<view class="its" v-for="i in its.category.split(',')" :key="i">{{i}}</view>
							</view>
							<view class="plun">
								<image :src="its.comment.userHead?its.comment.userHead:'/static/toux.png'" mode=""></image>
								<view class="tts">{{its.comment.content?its.comment.content:"暂无评价"}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="check" v-if="item.productList.length > 2" @click.stop="change(item.productList.length)">
					<view class="">
						<span v-if="checkAll">查看更多</span>
						<span v-else>收起</span>
						<uni-icons size='16' color="#979797" :type="checkAll?'down':'top'"></uni-icons>
					</view>
				</view>
			</view>
			<view class="kong" v-if="nolist">
				<view class="k1">
					<image src="/static/sekong.png" mode=""></image>
					<view class="t1">
						暂无商品
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getnewsShop
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 6
				},
				shoplist: [],
				nolist: false,
				checkAll: true,
				islength: 2,
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			onbottom() {
				this.params.pageNum++
				this.getList()
				// if(!this.nolist){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'商家已加载'
				// 	})
				// }
				console.log(this.nolist);
			},
			getList() {
				this.params = Object.assign(this.params, uni.getStorageSync('address'))
				getnewsShop(this.params).then(res => {
					this.shoplist.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
				})
			},
			//查看更多
			change(e) {
				this.checkAll = !this.checkAll
				this.checkAll ? this.islength = 2 : this.islength = e
			},
			pageShop(item) {
				uni.navigateTo({
					url: `/mainpage/shopdetail?id=${item.id}`
				})
			},
			pageDetail(id, distance) {
				uni.navigateTo({
					url: `/mainpage/details?productid=${id}&&distance=${distance}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.kong {
		margin-top: 230rpx;
		.k1 {
			text-align: center;
			image {
				width: 228rpx;
				height: 228rpx;
			}
	
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
		}
	}
	.new_tit {
		width: 100%;
		height: 88rpx;
		padding: 26rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #FBFBFB;
		box-sizing: border-box;

		.new_l {
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				margin: 0rpx 8rpx;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				margin-top: 10rpx;
			}
		}
	}

	scroll-view {
		width: 100%;
		max-height: calc(100vh - 44px);
		box-sizing: border-box;
		background-color: #FBFBFB;
	}

	.shop {
		width: 710rpx;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;

		.shoptit {
			display: flex;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			align-items: center;

			.x {
				width: 3rpx;
				height: 35rpx;
				background-color: #000000;
				margin: 0rpx 10rpx;
			}

			.block_flex {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin: 0rpx 6rpx;
				}

				.block_l {
					display: flex;
					align-items: center;

					.t1 {
						font-family: 'DINB';
						font-size: 32rpx;
						color: #000000;
					}

					.t2 {
						font-family: 'FINE';
						font-weight: 400;
						font-size: 24rpx;
						color: #979797;
					}

				}

				.block_r {
					font-family: 'FINE';
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}

		.shopflex {
			margin-top: 20rpx;
		}

		.price_item {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.img {
				width: 300rpx;
				height: 180rpx;
				position: relative;

				image {
					width: 300rpx;
					height: 180rpx;
					border-radius: 15rpx;
				}

				.tip {
					position: absolute;
					top: 14rpx;
					left: 12rpx;
					height: 32rpx;
					background: #29A85C;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 0 10rpx;
					line-height: 32rpx;
				}

				.time {
					position: absolute;
					bottom: 0%;
					width: 100%;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					font-family: PingFang SC,
					PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					border-radius: 0rpx 0rpx 15rpx 15rpx;
				}

				.time1 {
					position: absolute;
					top: 0%;
					width: 100%;
					height: 180rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 15rpx;
					display: flex;
					justify-content: center;

					.tflex {
						width: 100%;
						position: absolute;
						bottom: 6rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC,
							PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
					}

					.tflex1 {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;

						image {
							width: 44rpx;
							height: 44rpx;
							margin-right: 6rpx;
						}
					}

				}
			}

			.flex_r {
				margin-left: 20rpx;
				width: 350rpx;
			}

			.text {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tipflex {
				display: flex;
				align-items: center;

				.its {
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B7B7B;
					line-height: 44rpx;
					padding: 0rpx 16rpx;
					margin: 6rpx 8rpx 0rpx 0rpx;
				}
			}

			.plun {
				display: flex;
				margin-top: 8rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
					border-radius: 15rpx;
				}

				.tts {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.check {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		line-height: 30rpx;
		margin-bottom: 20rpx;
	}
</style>